<template>
  <el-dialog
    class="form-dialog form-preview"
    :visible.sync="visible"
    v-if="visible"
    modal-append-to-body
    append-to-body
    destroy-on-close
    width="1000px"
    z-index="1000"
  >
    <template #title>
      <el-radio-group v-model="active" size="mini">
        <el-radio-button label="pc">
          <i class="el-icon-monitor" />
        </el-radio-button>
        <el-radio-button label="phone">
          <i class="el-icon-mobile" />
        </el-radio-button>
      </el-radio-group>
    </template>
    <template v-if="formList && formList.length">
      <div v-show="active=='pc'">
        <PCForm :formList.sync="formList" :formConf="formConf" />
      </div>
      <div class="hu-form-phone" v-show="active=='phone'">
        <div class="hu-form-phone-cont">
          <PhoneForm :formList="formList" :formConf="formConf" />
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import PCForm from "../formComponents/pcForm.vue";
import PhoneForm from "../formComponents/phoneForm.vue";

export default {
  components: {
    PCForm,
    PhoneForm
  },
  data() {
    return {
      formList: [],
      formConf: {},
      visible: false,
      active: "pc"
    };
  },
  mounted() {},
  methods: {
    open(list, conf) {
      this.visible = true;
      this.formList = [];
      this.formConf = {};
      if (list) this.formList = list;
      if (conf) this.formConf = conf;
    }
  }
};
</script>

<style lang="scss" >
.form-preview {
  .el-dialog__header {
    text-align: center;
  }
}
.hu-form-phone {
  margin: -25px auto;
  height: calc(100% + 30px);
  aspect-ratio: 4/7;
  position: relative;

  background-image: url("../../../images/phone_bg.png");
  background-repeat: no-repeat;
  background-size: cover;

  .hu-form-phone-cont {
    z-index: 1;
    background: #fff;
    position: absolute;
    inset: 10% 18% 16%;
    overflow: auto;
  }
}
.pho-dialog {
  .el-dialog .el-dialog__body {
    overflow: hidden;
  }
}
</style>
